<template>
  <MdEditor
    v-model="text"
    style="height: 400px"
    v-bind="$attrs"
    v-if="!$props.isPreview"
    @onUploadImg="onUploadImg"
  ></MdEditor>
  <MdPreview :modelValue="text" v-if="$props.isPreview" v-bind="$attrs" />
</template>

<script lang="ts" setup>
import { ModelRef } from 'vue'
import { MdEditor, MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

const text = defineModel() as ModelRef<string>

const $props = withDefaults(
  defineProps<{
    isPreview?: boolean
  }>(),
  {
    isPreview: false,
  },
)
// 上传图片
const onUploadImg = async (files, callback) => {
  const res = await Promise.all(
    files.map((file) => {
      return new Promise((rev, rej) => {
        const form = new FormData();
        form.append('file', file);
        api.upload({
          url: 'demand/oss/files',
          data: {
            file,
          },
        })
          .then((res) => rev(res))
          .catch((error) => {
            rej(error)
          });
      });
    })
  );
  callback(
    res.map((item) => item)
  );
};


</script>

<style>
.md-editor-toolbar-wrapper{
  height:90px;
}

.md-editor-preview-wrapper .medium-zoom-image{
  margin-left: 0px !important;
}
</style>


